{extend name="public/list_page"/}
{block name="content"}
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form layui-col-space5" autocomplete="off">
            <div class="layui-inline">
                <select name="status" lay-filter="readStatus" id="readStatus">
                    <option value="">请选择状态</option>
                    <option value="1" {if $status == 1} selected {/if}>未读</option>
                    <option value="2" {if $status == 2} selected {/if}>已读</option>
                </select>
            </div>

            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="operationDate" placeholder="起始时间" style="width: 300px">
                </div>
            </div>

            <div class="layui-inline layui-show-xs-block">
                <button type="submit" lay-submit="" lay-filter="search" class="layui-btn layui-btn-normal" title="筛选"><i class="layui-icon">&#xe615;</i></button>
                <button type="reset" lay-submit lay-filter="resetDate" class="layui-btn layui-btn-primary" title="重置"><i class="layui-icon">&#xe669;</i></button>
            </div>
        </form>

        <table class="layui-table" id="list" lay-filter="list"></table>
    </div>
</div>
{/block}

{block name="custom"}
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="read">已读</button>
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="allRead">全部已读</button>
        <button class="layui-btn layui-btn-sm layui-btn-del" lay-event="delete">删除</button>
        <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="export">导出</button>
        <!--<button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="copy">复制</button>-->
    </div>
</script>

<script type="text/html" id="isRead">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="已读|未读" lay-filter="isRead" {{ d.status == 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="barHandle">
    <button type="button" class="layui-btn handel-btn layui-btn-primary" lay-event="edit" title="查看"><i class="fa fa-search"></i></button>
    <button type="button" class="layui-btn handel-btn layui-btn-del" lay-event="del" title="删除"><i class="fa fa-trash-o"></i></button>
</script>
{/block}

{block name="js"}
<script>
    var readStatus = '{$status|default=""}'
    var startTime = ''
    var endTime = ''
    layui.use(['table','form','laydate'], function() {
        var $ = layui.jquery,
            table = layui.table,
            form = layui.form,
            laydate = layui.laydate;

        var tableIns = table.render({
            title: '询盘消息',//导出时的文件名
            elem: "#list",
            method: "post",
            url: "{:url('inquiry/index')}",
            where:{status:"{$status}"},
            page: true,
            limits: [10, 25, 50, 100, 200, 300, 400, 500, 1000],
            toolbar: "#toolbar",//开启头部工具栏
            defaultToolbar:[],
            response: {
                statusCode: 'suc'
            },
            cols: [[
                {type: 'checkbox',width:80},
                {field: 'name', title: '名称', align: 'center'},
                {field: 'email', title: '邮箱', align: 'center'},
                {field: 'message', title: '内容', align: 'center'},
                {field: 'status', title: '状态', align:'center', templet: '#isRead'},
                {field: 'create_time', title: '发送时间', align: 'center'},
                {field: '', title: '操作', align: 'center', toolbar: '#barHandle'}
            ]],
            done:function (res, curr, count) {
                $('.layui-table-cell').css({'height':'auto'})
            }
        });

        //时间选择器
        var layDate = laydate.render({
            elem:'#operationDate',
            theme: '#01AAED',
            type:'datetime',
            range:true,
            done:function (value, date, endDate) {
                startTime = date;
                endTime = endDate
                // console.log(value); //得到日期生成的值，如：2017-08-18
                // console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                // console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
            }
        });

        //监听头部工具栏
        table.on('toolbar(list)',function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event){
                case 'read':
                    //选中行的信息
                    var checkRow = checkStatus.data;
                    if (checkRow.length === 0){
                        layer.msg('至少选中一行',{time:1500,icon:0})
                        break
                    }
                    let idArr = [];
                    for (let i = 0; i < checkRow.length; i++) {
                        idArr.push(checkRow[i].id)
                    }
                    layer.confirm('确认设置为已读？',{title:'',btn:['确定','取消']},function () {
                        ajaxRequest("{:url('inquiry/setRead')}",{id:idArr},function (res) {
                            if (res.code == 'suc'){
                                sucMsg(res.msg)
                            } else {
                                errMsg(res.msg())
                            }
                            tableIns.reload()
                        })
                    })
                    break;
                case 'allRead':
                    layer.confirm('确认全部设置为已读？', {
                        title: '', btn: ['确定', '取消'], cancel: function (index, layero) {

                        }
                    }, function (index) {
                        ajaxRequest("{:url('inquiry/allRead')}", {data: ''}, function (res) {
                            if (res.code == 'suc'){
                                sucMsg(res.msg)
                            } else {
                                errMsg(res.msg())
                            }
                            tableIns.reload()
                        })
                    })
                    break;
                case 'delete':
                    //选中行的信息
                    var checkRow = checkStatus.data;
                    if (checkRow.length === 0){
                        layer.msg('至少选中一行',{time:msgShowTime,icon:icoHint})
                        break
                    }

                    let checkIdArr = [];
                    for (let i = 0; i < checkRow.length; i++) {
                        checkIdArr.push(checkRow[i].id)
                    }
                    layer.confirm('确认删除？',{title:'',btn:['确定','取消']},function () {
                        ajaxRequest("{:url('inquiry/del')}",{id:checkIdArr},function (res) {
                            if (res.code == 'suc'){
                                sucMsg(res.msg)
                            } else {
                                errMsg(res.msg())
                            }
                            tableIns.reload()
                        })
                    })
                    break;
                case 'export':
                    //导出
                    // exportExcel
                    location.href = "{:url('inquiry/exportExcel')}"
                    break;
            }
        })

        // 监听工具列点击事件
        table.on('tool(list)',function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                let id = data.id
                let url = "{:url('inquiry/details')}?id="+id
                xadmin.open('查看',url)
            }
        });

        //监听状态操作
        form.on('switch(isRead)',function (obj){
            let id = obj.value
            let tip = '';
            let type = 1;
            if (obj.elem.checked == true){
                tip = '确定设置为已读？';
            } else {
                tip = '确定设置为未读？';
                type = 2;
            }
            layer.confirm(tip,{title:'',btn:['确定','取消'],cancel:function () {
                    tableIns.reload();
                }
            },function () {
                var load = layer.load(1,{shade:[0.5,'#FFF']});
                ajaxRequest("{:url('inquiry/changeReadStatus')}", {id: id, type: type}, function (res) {
                    if (res.code == 'suc'){
                        sucMsg(res.msg)
                    } else {
                        errMsg(res.msg())
                    }
                    tableIns.reload()
                });
                tableIns.reload();
                layer.close(load);
            },function () {
                tableIns.reload();
            })
        })

        form.on('select(readStatus)', function(data){
            readStatus = data.value
        });

        //监听提交
        form.on('submit(search)',function (data) {
            let start = null;
            let end = null;
            if (startTime.length !== 0){
                start = startTime.year + '-' + startTime.month + '-' + startTime.date + ' ' + startTime.hours + ':' + startTime.minutes + ':' + startTime.seconds
                end = endTime.year + '-' + endTime.month + '-' + endTime.date + ' ' + endTime.hours + ':' + endTime.minutes + ':' + endTime.seconds
            }

            //重载表格
            tableIns.reload({
                where:{
                    status:readStatus,
                    start_time:start,
                    end_time:end,
                },
                page:{
                    curr:1
                }
            });
            return false
        });

        form.on('submit(resetDate)',function () {
            readStatus = ''
            startTime = null;
            endTime = null;
            form.render('select')
        });
    });
</script>
{/block}